<template>
  <div>
    <myPage></myPage>
    <div style="border-radius: 15px">
      <el-table
        :data="orderData"
        height="560px"
        :row-class-name="tableRow"
        @row-dblclick="checkDetails"
      >
        <el-table-column
          prop="time"
          label="下单时间"
          :formatter="timer"
          align="center"
        ></el-table-column>
        <el-table-column prop="order_price" label="订单价格" align="center">
          <template slot-scope="scope">
            <span>￥{{ scope.row.order_price }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="pay_state" label="支付状态" align="center">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.pay_state == 201 && scope.row.order_state !== 203"
              type="text"
              @click="pay(scope.row)"
              >支付</el-button
            >
            <span v-if="scope.row.pay_state == 201 && scope.row.order_state === 203">无需付款</span>
            <span v-if="scope.row.pay_state == 200 && scope.row.order_state !== 203">已支付</span>
            <span v-if="scope.row.pay_state == 203 &&scope.row.order_state !== 203">退款中</span>
            <span v-if="scope.row.pay_state == 203">已退款</span>
          </template>
        </el-table-column>
        <el-table-column prop="order_state" label="订单状态" ordergn="center">
          <template slot-scope="scope">
            <span v-if="scope.row.order_state == 200">已完成</span>
            <span v-if="scope.row.order_state == 201">暂未发货</span>
            <span v-if="scope.row.order_state == 202">已发货</span>
            <el-button v-if="scope.row.order_state == 202" type="text" size="mini" @click="confirmGoods(scope.row)">确认收货</el-button>
            <span v-if="scope.row.order_state == 203">已取消</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">

            <el-button
              v-if="
                scope.row.pay_state !== 204 &&
                scope.row.pay_state !== 203 &&
                scope.row.order_state !== 200 &&
                scope.row.order_state !== 203
              "
              type="danger"
              size="mini"
              @click="cancel(scope.row)"
              >取消</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      title="详情"
      :visible="showDetail"
      center
      :visible.sync="showDetail"
    >
      <el-table :data="orderInfo" show-summary border max-height="340px">
        <el-table-column label="缩略图" align="center" width="100px">
          <template slot-scope="scope">
            <img
              v-if="scope.row.url.length !== 0"
              :src="scope.row.url"
              alt=""
              style="width: 100%"
            />
            <span v-if="scope.row.url.length === 0">暂无图片</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="cardrace"
          label="卡种"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="types"
          label="卡类"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="num"
          label="数量"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="priceNow"
          label="价格"
          align="center"
        ></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="text" @click="closeDialog">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import myPage from "@/components/my-page";
export default {
  name: "orderInfo",
  components: { myPage },
  data() {
    return {
      orderData: [],
      showDetail: false,
      orderInfo: [],
    };
  },
  mounted() {
    this.getOrder();
  },
  methods: {
    tableRow({ row }) {
      console.log(row);
      if (row.pay_state === 201 && row.order_state === 201) {
        return "warning-row";
      } else if (row.pay_state === 200 && row.order_state === 201) {
        return "message-row";
      } else if (row.pay_state === 200 && row.order_state === 200) {
        return "success-row";
      }
      return "";
    },
    timer(row) {
      var moment = require("moment");
      if (row.time == undefined) {
        return "暂无数据";
      } else {
        var times = moment(row.time).format("YYYY-MM-DD HH:MM:SS");
        return times;
      }
    },
    getOrder() {
      var id = window.sessionStorage.getItem("id");
      this.axios
        .get("/api/getOrder", {
          params: {
            userIqd: id,
          },
        })
        .then((res) => {
          console.log(res.data);
          this.orderData = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    pay(row) {
      console.log(row);
      this.axios
        .put("/api/pay", {
          id: row._id,
        })
        .then((res) => {
          console.log(res);
          this.getOrder();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    cancel(row) {
      this.axios
        .patch("/api/cancelOrder", {
          pay_state: row.pay_state,
          id: row._id,
        })
        .then((res) => {
          console.log(res);
          this.getOrder();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    checkDetails(row) {
      console.log(row);
      this.axios
        .post("/api/checkDetail", {
          id: row._id,
        })
        .then((res) => {
          console.log(res.data.Pdata);
          console.log(res.data.orderData);
          let Pdata = res.data.Pdata;
          let orderData = res.data.orderData;
          Pdata.map((i) => {
            i.num = orderData.find((item) => item.Pid == i._id).num;
          });
          console.log(Pdata);
          this.orderInfo = Pdata;
          this.showDetail = true;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    closeDialog() {
      this.showDetail = false;
    },
    confirmGoods(row){
      console.log(row);
      this.axios.patch('/api/confirmGoods',{
        id:row._id
      }).then(res=>{
        console.log(res)
        this.getOrder();
      }).catch(err=>{
        console.log(err)
      })
    }
  },
};
</script>

<style scoped>
/deep/ .el-table {
  width: 95%;
  margin: 0 auto 0;
  border-radius: 15px;
}
/deep/ .el-dialog__body {
  height: 300px;
}
/deep/ .el-table .warning-row {
  background-color: rgba(253, 245, 230, 0.8);
}

/deep/ .el-table .success-row {
  background: rgba(84, 255, 159, 0.3);
}
/deep/ .el-table .message-row {
  background: rgba(0, 191, 255, 0.3);
}
</style>
